<template>
  <div class="topbar">
    <div class="main">
      <div class="left-nav">
        <ul>
          <li>
            <router-link to="/">首页</router-link>
          </li>
          <li v-for="item in channels" :key="item.channelId">
            <router-link :to="'/channelsnews/'+ item.channelId">{{item.name}}</router-link>
          </li>
        </ul>
      </div>
      <div class="right-nav">
        <div class="login">
          <router-link :to="{name: 'Login'}">登录</router-link>
        </div>
        <div class="register">
          <router-link :to="{name: 'Register'}">注册</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getChannels } from "@/services/services.js";
export default {
  data() {
    return {
      channels: []
    };
  },
  async created() {
    let result = await getChannels();
    this.channels = result.slice(0, 7);
    // console.log(this.channels);
  }
};
</script>

<style lang="less" scoped>
.topbar {
  width: 100%;
  height: 60px;
  background-color: #000000;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  .main {
    width: 1000px;
    height: 60px;
    margin: 0 auto;
    a {
      color: #ffffff;
      &:hover {
        color: #fcb85f;
      }
      &.router-link-exact-active {
        color: #fcb85f;
      }
    }
    .left-nav {
      float: left;
      & ul > li {
        float: left;
        height: 60px;
        line-height: 60px;
        padding: 0 10px;
      }
    }
    .right-nav {
      float: right;
      & > * {
        float: left;
        height: 60px;
        line-height: 60px;
        padding: 0 10px;
      }
    }
  }
}
</style>